<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>英雄页面</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
</head>
<body>
    <!--添加按钮-->
    <button type="button" class="layui-btn" id="add">添加英雄</button>
    <!--添加form表单-->
    <form class="layui-form" id="addForm" lay-filter="addFormFilter" style="display: none;padding: 20px 20px 10px 10px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <div class="layui-form-item">
            <label class="layui-form-label">英雄姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="0" title="男">
                <input type="radio" name="sex" value="1" title="女" checked>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属国家</label>
            <div class="layui-input-block">
                <select id="addSelect" name="country.cid" lay-filter="addSelectFilter">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="addFilter">添加</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <!--展示table表格-->
    <table id="myTable" lay-filter="tableFilter"></table>
    <!--toolbar组件-->
    <script type="text/html" id="bar">
        <a class="layui-btn layui-btn-xs" lay-event="upd">修改</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
    </script>
    <!--修改页面-->
    <form class="layui-form" id="updateForm" lay-filter="updateFormFilter" style="display: none;padding: 20px 20px 10px 10px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
        <div class="layui-form-item">
            <label class="layui-form-label">英雄姓名</label>
            <div class="layui-input-block">
                <input type="hidden" name="id"/>
                <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="0" title="男">
                <input type="radio" name="sex" value="1" title="女" checked>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属国家</label>
            <div class="layui-input-block">
                <select id="updateSelect" name="country.cid" lay-filter="updateSelectFilter">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="updateFilter">修改</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <!--layui代码-->
    <script>
        layui.use(['table','form','layer'],function () {
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.$;
            //渲染表格
            table.render({
                elem:'#myTable',
                url:'hero/show',
                height:'312px',
                page:true,
                limit:3,
                limits:[3,4,5],
                cols:[[
                    {field:'id',title:'英雄编号',width:180,sort:true},
                    {field:'name',title:'英雄姓名',width:180,sort:true},
                    {title:'性别',templet:function (d) {
                            if(d.sex==0){
                                return '男'
                            }else if(d.sex==1){
                                return '女'
                            }
                        }},
                    //注：使用自定义模板后 就不用写filed了  前者的优先级高于后者
                    //并且function内的代码属于js代码  可以用对象.属性.属性...
                    {title:'所属国家',width:180,templet:function (d) {
                            return d.country.cname
                        }},
                    {title:'操作',toolbar:'#bar'}
                ]]
            })
            //加载下拉框数据(添加和修改的两个下拉框都以前加载出来)
            $.ajax({
                url:'country/selectAll',
                success:function (result) {
                    var s = '';
                    $(result.list).each(function (i,obj) {
                        s+='<option value="'+obj.cid+'">'+obj.cname+'</option>'
                    })
                    $('#addSelect').html(s);
                    $('#updateSelect').html(s);
                    //刷新下拉框  因为下拉框数据是动态更新的
                    form.render('select');
                }
            })
            //添加操作
            $('#add').click(function () {
                //弹出添加页面
                layer.open({
                    type:1,
                    title:'添加页面',
                    area:'500px',
                    content:$('#addForm')
                })
                //提交添加表单数据
                form.on('submit(addFilter)',function () {
                    $.ajax({
                        url:'hero/add',
                        data:$('#addForm').serialize(),
                        success:function (result) {
                            if(result.flag){
                                layer.msg('添加成功');
                                layer.closeAll();
                                $('#addForm')[0].reset();
                                table.reload('myTable');
                            }
                        }
                    })
                    //阻止表单提交
                    return false;
                })
            })
            //修改和删除操作
            table.on('tool(tableFilter)',function (obj) {
                if(obj.event=='upd'){
                    //修改
                    //弹出修改页面
                    layer.open({
                        type:1,
                        title:'修改页面',
                        area:'500px',
                        content:$('#updateForm')
                    })
                    //回显页面数据
                    $.ajax({
                        url:'hero/getOne',
                        data:'id='+obj.data.id,
                        success:function (result) {
                            console.log(result);
                            form.val('updateFormFilter',{
                                id:result.id,
                                name:result.name,
                                sex:result.sex,
                                'country.cid':result.country.cid
                                // cid:result.country.cid

                            })
                        }
                    })
                    //提交修改页面数据
                    form.on('submit(updateFilter)',function () {
                        console.log('aaaa')
                        $.ajax({
                            url:'hero/update',
                            data:$('#updateForm').serialize(),
                            success:function (result) {
                                if(result.flag){
                                    layer.msg('修改成功');
                                    layer.closeAll();
                                    table.reload('myTable');
                                }
                            }
                        })
                        return false;
                    })

                }else if(obj.event=='del'){
                    //删除
                    layer.confirm('确定删除吗？',function (index) {
                        $.ajax({
                            url:'hero/remove',
                            data:'id='+obj.data.id,
                            success:function (result) {
                                if(result.flag){
                                    layer.msg('删除成功');
                                    table.reload('myTable')
                                }
                            }
                        })
                        layer.close(index)
                    })
                }
            })
        })
    </script>
</body>
</html>